<template>
  <div class="regex-tool">
    <h2>正则表达式匹配工具</h2>
    <div class="feature-group">
      <label class="feature-label">工具说明:</label>
      <ul class="feature-list">
        <li class="feature-item">请按照正则表达式的规则填写表单，点击“开始匹配”按钮即可提取信息。</li>
        <li class="feature-item">本工具支持 Python 正则表达式语法，使用 JavaScript 实现匹配功能。</li>
      </ul>
    </div>

    <!-- 输入区域 -->
    <div class="input-section">
      <label for="input-text" class="label">待匹配信息:</label>
      <textarea
        id="input-text"
        v-model="inputText"
        placeholder="请输入待匹配的文本"
        rows="4"
        class="input-textarea"
      ></textarea>
    </div>

    <!-- 正则表达式区域 -->
    <div class="input-section">
      <label for="regex-pattern" class="label">正则表达式:</label>
      <input
        id="regex-pattern"
        type="text"
        v-model="regexPattern"
        placeholder="请输入正则表达式 (例如: [a-zA-Z]+://[\S]*)"
        class="input-field"
      />
    </div>

    <!-- 匹配按钮 -->
    <div class="button-container">
      <button class="match-button" @click="matchRegex">开始匹配</button>
    </div>

    <!-- 结果显示区域 -->
    <div class="result-section">
      <h3 class="result-header">匹配结果:</h3>
      <div class="result-container">
        <pre v-if="matchResult.length > 0" class="result-pre">{{ matchResult }}</pre>
        <p v-else class="placeholder-text">点击“开始匹配”按钮后，匹配结果将显示在这里。</p>
      </div>
    </div>
  </div>
</template>

<script setup>
// 定义RegexTool组件的响应式数据
const inputText = ref('');
const regexPattern = ref('');
const matchResult = ref('');
const showResult = ref(false);

// 定义matchRegex函数
const matchRegex = () => {
  try {
    const regex = new RegExp(regexPattern.value, 'g');
    const matches = inputText.value.match(regex);
    if (matches) {
      matchResult.value = matches.join(', ');
      showResult.value = true;
    } else {
      matchResult.value = '未找到匹配内容';
      showResult.value = true;
    }
  } catch (error) {
    matchResult.value = `匹配失败: ${error.message}`;
    showResult.value = true;
  }
};

// 在组件挂载时初始化数据并调用matchRegex函数
onMounted(() => {
  inputText.value = '请输入待匹配的文本';
  regexPattern.value = '请输入正则表达式 (例如: [a-zA-Z]+://[\S]*)';
  matchResult.value = '';
  showResult.value = false;
  matchRegex();
});
</script>




<style scoped>
.regex-tool {
  max-width: 1000px;
  width: calc(100% - 60px);
  margin: 40px auto 10px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

h2 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 24px;
  color: #17a2b8;
}

.feature-group {
  margin-bottom: 20px;
}

.feature-label {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: bold;
  border-left: 4px solid #17a2b8;
  padding-left: 10px;
}

.feature-list {
  margin: 0;
  padding: 20px;
  border-radius: 4px;
}

.feature-item {
  margin: 0 0 8px 20px;
  font-size: 14px;
  line-height: 1.5;
  list-style-type: disc; /* 列表符号 */
}

.feature-list::marker {
  color: #007bff; /* 圆点颜色 */
  font-size: 16px; /* 圆点大小 */
}

/* 如果你有具体的列表内容，可以在这里添加 */
.feature-list ul {
  margin: 0;
  padding: 0;
  list-style-type: none; /* 先去掉默认样式 */
}

.feature-list ul li::before {
  content: '•'; /* 添加圆点 */
  color: #007bff; /* 圆点颜色 */
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  font-size: 16px; /* 圆点大小 */
}

.input-section {
  margin-bottom: 20px;
}

.label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
}

.input-textarea {
  width: calc(100% - 20px);
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.input-field {
  width: calc(100% - 20px);
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.match-button {
  padding: 10px 20px;
  background-color: #1abc9c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.match-button:hover {
  background-color: #16a085;
}

.result-section {
  text-align: left;
}

.result-header {
  margin: 10px 0;
  color: #333;
}

.result-container {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

.result-pre {
  background-color: #f5f5f5;
  padding: 10px;
  white-space: pre-wrap;
  word-break: break-all;
  color: #333;
  font-family: monospace;
}

.placeholder-text {
  margin: 0;
  color: #777;
}
</style>
